<template>
    <div class="value pdTop pdBot">
        <h2 class="pdBot">{{$t('home.value.title')}}</h2>
        <b-container>
            <b-row>
                <b-col xl="3" lg="3" md="3" sm="6" v-for="(value,index) in $t('home.value.ways')" :key="index" class="value-list">
                    <img :src="require(`../images/value-img-${index+1}.png`)">
                    <h3>{{value.title}}</h3>
                    <p>{{value.desc}}</p>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<style lang="scss" scoped>
.value{
    text-align: center;
    .value-list{
        img{
            cursor: pointer;
            transition: transform 0.5s;
            &:hover{
                transform: rotateY(180deg);
            }
        }
        h3{
            margin-top: 20px;
        }
        p{
            margin-top: 25px;
            margin-bottom: 20px;
        }
    }
}
</style>
